<template>
  <div class="app-container">
    <el-card>
      <el-form
        :inline="true"
        size="mini"
        ref="selectForm"
        :model="searchForm"
        label-width="80px"
        :rules="searchRules"
      >
        <el-form-item prop="region" label="选择银行">
          <el-select
            filterable
            v-model="searchForm.region"
            placeholder="选择银行："
            @change="regionChange"
          >
            <el-option
              v-for="item in regionData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="product" label="选择产品">
          <el-select
            filterable
            v-model="searchForm.product"
            value-key="id"
            placeholder="选择产品："
            @change="productChange"
          >
            <el-option
              v-for="item in productData"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="resetFrom('selectForm')"
          >重置
          </el-button
          >
          <el-button type="primary" size="small" @click="getProductDetails"
          >查询
          </el-button
          >
        </el-form-item>
      </el-form>

      <div class="title">
        <template v-if="searchForm.product">
          <el-image
            :src="searchForm.product.pic"
            style="width: 48px; height: 48px"
          >
          </el-image>
          <div class="title-name">{{ searchForm.product.name }}</div>
          <div
            :class="
              searchForm.product.entered === 0
                ? 'not-entered state'
                : 'entered state'
            "
          >
            {{ searchForm.product.entered === 0 ? "未录入" : "已录入" }}
          </div>
        </template>
      </div>
      <el-divider></el-divider>
      <div v-if="this.productId" class="form-main" ref="formMain">
        <div style="min-height: 360px" v-loading="conditionLoading">
          <!-- <el-form
            :model="form"
            ref="formRef"
            style="margin-top: 30px"
            v-if="isShowFrom"
          >
            <div v-for="item in formArr" :key="item">
              <div class="inputSty" v-if="dic[item].valueType === 'BETWEEN'">
                <el-form-item
                  :prop="`${item}.valueMin`"
                  :rules="{
                    required: true,
                    message: `请输入${dic[item].conditionsName}`,
                    trigger: 'blur',
                  }"
                  :label="dic[item].conditionsName"
                >
                  <el-input
                    style="width: 234px"
                    :placeholder="`请输入${dic[item].conditionsName}`"
                    clearable
                    type="number"
                    min="0"
                    v-model="form[item].valueMin"
                  >
                  </el-input>
                </el-form-item>
                <div class="input-line">-</div>
                <el-form-item
                  :prop="`${item}.valueMax`"
                  :rules="{
                    required: true,
                    message: `请输入${dic[item].conditionsName}`,
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    clearable
                    maxlength="200"
                    style="width: 234px"
                    :placeholder="`请输入${dic[item].conditionsName}`"
                    type="number"
                    min="0"
                    v-model="form[item].valueMax"
                  >
                  </el-input>
                </el-form-item>
              </div>

              <el-form-item
                :label="dic[item].conditionsName"
                label-width="160px"
                :rules="{
                  required: true,
                  message: `请选择${dic[item].conditionsName}`,
                  trigger: 'change',
                }"
                :prop="item"
                v-else-if="
                  dic[item].valueType === 'ENUM_MORE' ||
                  dic[item].valueType === 'ENUM'
                "
              >
                <el-select
                  :multiple="isMultiple(dic[item].valueType)"
                  style="width: 500px"
                  v-model="form[item]"
                  :placeholder="`请选择${dic[item].conditionsName}`"
                  clearable
                >
                  <el-option
                    v-for="val in dic[item].selectList"
                    :key="val.id"
                    :label="val.label"
                    :value="val.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                v-else-if="dic[item].valueType === 'EQUAL'"
                :prop="item"
                :rules="{
                  required: true,
                  message: `请输入${dic[item].conditionsName}`,
                  trigger: 'blur',
                }"
                :label="dic[item].conditionsName"
                label-width="160px"
              >
                <el-input
                  style="width: 500px"
                  v-model="form[item]"
                  :placeholder="`请输入${dic[item].conditionsName}`"
                ></el-input>
              </el-form-item>
            </div>

            <el-form-item>
              <el-button type="primary" @click="addCondition"
                >添加条件</el-button
              >
              <el-button type="primary" @click="deleteCondition"
                >删除条件</el-button
              >
            </el-form-item>

            <div class="bottom">
              <el-button
                v-debounce="2000"
                style="width: 120px"
                type="primary"
                @click="onSubmit()"
                >提交</el-button
              >
            </div>
          </el-form> -->
          <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            style="margin-top: 30px"
            v-if="isShowFrom"
          >
            <el-form-item
              v-for="item in formArr"
              :key="item"
              :label="dic[item].conditionsName"
              label-width="160px"
              :prop="item"
            >
              <div class="inputSty" v-if="dic[item].valueType === 'BETWEEN'">
                <el-form-item :prop="`${item}.valueMin`">
                  <el-input
                    style="width: 234px"
                    placeholder="请输入"
                    clearable
                    type="number"
                    min="0"
                    max="100"
                    v-model.number="form[item].valueMin"
                  >
                  </el-input>
                </el-form-item>
                <div class="input-line">-</div>
                <el-form-item :prop="`${item}.valueMax`">
                  <el-input
                    clearable
                    maxlength="200"
                    style="width: 234px"
                    placeholder="请输入"
                    type="number"
                    min="0"
                    max="100"
                    v-model.number="form[item].valueMax"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <el-select
                v-else-if="
                  dic[item].valueType === 'ENUM_MORE' ||
                  dic[item].valueType === 'ENUM'
                "
                :multiple="isMultiple(dic[item].valueType)"
                style="width: 500px"
                v-model="form[item]"
                filterable
                :placeholder="`请选择${dic[item].conditionsName}`"
                clearable
              >
                <el-option
                  v-for="val in dic[item].selectList"
                  :key="val.id"
                  :label="val.label"
                  :value="val.id"
                >
                </el-option>
              </el-select>

              <el-input
                v-else-if="dic[item].valueType === 'EQUAL'"
                style="width: 500px"
                v-model="form[item]"
                :placeholder="`请选择${dic[item].conditionsName}`"
              ></el-input>
              <div v-else-if="dic[item].valueType === 'OP_EQUAL'">
                <div v-for="(val, index) in form[item]">
                  <div v-for="(j, s) in dic[item].selectList">
                    <div v-if="val.dimensionId == j.id">
                      {{ j.label }}
                    </div>
                  </div>
                  <div v-if="val.label">{{ val.label }}</div>
                  <div class="display-OP_EQUAL">
                    {{ val.unknowns && val.unknowns[0] }}&nbsp;&nbsp;
                    <el-form-item
                      v-if="val.unknowns && val.unknowns[0]"
                      :prop="val.conditions + '.' + index + '.value1'"
                      @blur="myinput(index)"
                      :ref="'myinput' + index"
                      :rules="[
                        { required: true, message: '请输入', trigger: 'blur' },
                      ]"
                    >
                      <el-input
                        type="number"
                        min="0"
                        max="100"
                        style="width: 100px"
                        v-model="val.value1"
                        :placeholder="`请输入`"
                      ></el-input>
                    </el-form-item>
                    &nbsp;&nbsp;{{
                      val.unknowns && val.unknowns[1]
                    }}&nbsp;&nbsp;
                    <el-form-item
                      v-if="val.unknowns && val.unknowns[1]"
                      :prop="val.conditions + '.' + index + '.value2'"
                      :rules="[
                        { required: true, message: '请输入', trigger: 'blur' },
                      ]"
                    >
                      <el-input
                        type="number"
                        min="0"
                        max="100"
                        style="width: 100px"
                        v-model="val.value2"
                        :placeholder="`请输入`"
                      ></el-input>
                    </el-form-item>
                    <el-button
                      v-if="val.unknowns && val.unknowns[1]"
                      style="margin-left: 10px"
                      size="mini"
                      @click="
                        addSCOPE(form[item], dic[item].conditions, val, index)
                      "
                    >
                      添加
                    </el-button>
                    <el-button
                      v-if="val.unknowns && val.unknowns[1]"
                      size="mini"
                      @click="scurvy(index, form[item])"
                    >
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
              <div v-else-if="dic[item].valueType === 'OP_SCOPE'">
                <div
                  v-for="(v, idx1) in form[item]"
                  :key="idx1"
                  style="margin-top: 5px"
                >
                  {{ v.label }}
                  <div class="display-OP_EQUAL">
                    <span>
                      <el-form-item
                        :prop="v.conditions||item + '.' + idx1 + '.leftValue'"
                        :rules="[
                          {
                            required: true,
                            message: '请输入',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          :placeholder="`请输入`"
                          size="mini"
                          :disabled="v.leftOp == 'NO'"
                          v-model="v.leftOp == 'NO' ? (v.leftValue = 0) : v.leftValue"
                          style="width: 150px"
                        ></el-input>
                      </el-form-item>
                    </span>
                    <span
                    ><el-select
                      size="mini"
                      @change="
                          changeLeftOp(dic[item].selectList[0], index, idx1)
                        "
                        :placeholder="``"
                      v-model="v.leftOp"
                      style="width: 60px"
                    >
                        <el-option
                          v-for="(it, i) in lsl6Op"
                          :key="i"
                          :label="it.label"
                          :value="it.value"
                        ></el-option> </el-select
                    ></span>
                    <span style="margin: 0 10px; font-size: 14px">{{
                        v.un
                      }}</span>
                    <span
                    ><el-select
                      size="mini"
                      :placeholder="``"
                      v-model="v.rightOp"

                      @change="
                          changeRightOp(dic[item].selectList[0], i, idx1)
                        "
                      style="width: 60px"
                    >
                        <el-option
                          v-for="(it, i) in lsl6Op"
                          :key="i"
                          :label="it.label"
                          :value="it.value"
                        ></el-option> </el-select
                    ></span>

                    <span>
                      <el-form-item
                        :prop="v.conditions||item + '.' + idx1 + '.rightValue'"
                        :rules="[
                          {
                            required: true,
                            message: '请输入',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <el-input
                          :placeholder="`请输入`"
                          :disabled="v.rightOp == 'NO'"
                          size="mini"
                          v-model="v.rightOp == 'NO'? (v.rightValue = 0): v.rightValue "
                          style="width: 150px"
                        ></el-input>
                      </el-form-item>
                    </span>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addCondition"
              >添加条件
              </el-button
              >
              <el-button type="primary" @click="deleteCondition"
              >删除条件
              </el-button
              >
            </el-form-item>

            <div class="bottom">
              <el-button
                v-btnpermission="$btnPer.productBtnrules.editCondition"
                v-debounce="2000"
                style="width: 120px"
                type="primary"
                @click="onSubmit()"
              >提交
              </el-button
              >
            </div>
          </el-form>
        </div>
      </div>

      <el-empty
        v-else
        :image="require('@/assets/images/empty.png')"
        :image-size="300"
        description="请选择仓库中的产品进行编辑和修改"
      >
        <template slot="description">
          <div class="empty-title">请选择仓库中的产品进行编辑和修改</div>
        </template>
      </el-empty>
    </el-card>
    <el-dialog
      title="添加条件"
      :visible.sync="addVisible"
      width="46%"
      @close="addDialogClose"
    >
      <el-form
        :model="addForm"
        ref="addformRef"
        :rules="addRules"
        style="margin-top: 30px"
      >
        <el-form-item label="添加条件：" label-width="120px" prop="condition">
          <el-select
            style="width: 96%"
            v-model="addForm.condition"
            clearable
            @change="addChange"
            filterable
          >
            <el-option
              v-for="val in addArr"
              :key="val.conditions"
              :label="val.conditionsName"
              :value="val.conditions"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <div class="dialog-hint">
          *如条件库没有所需条件，请联系后端人员增加条件
        </div>

        <el-form-item
          label="选择选项："
          v-if="AddUpdate"
          label-width="120px"
          prop="option"
        >
          <el-select
            style="width: 96%"
            v-model="addForm.option"
            :multiple="isAddMultiple"
            value-key="id"
            @change="addChangeLIST"
            clearable
          >
            <el-option
              v-for="val in optionArr"
              :key="val.id"
              :label="val.label"
              :value="val"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addHandel">确定添加</el-button>
        <el-button @click="addVisible = false">取消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      ref=""
      title="删除条件"
      :visible.sync="deleteVisible"
      width="46%"
      @close="delDialogClose"
    >
      <div style="padding: 0 3%">
        <div class="deletet">删除已有条件：</div>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选
        </el-checkbox
        >
        <el-checkbox-group v-model="deleteFrom" @change="handleCheckedChange">
          <el-checkbox v-for="item in formArr" :key="item" :label="item">{{
              dic[item].conditionsName
            }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delConfirm">确定删除</el-button>
        <el-button @click="deleteVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProductDimension,
  addOrUpdateMatching,
  getProductDetails,
  getListBankProduct,
} from "@/api/product";

export default {
  data() {
    return {
      // 添加条件判断选择项
      addFormList: [],
      lsl6Op: [
        {label: "无", value: "NO"},
        {label: "=", value: "EQ"},
        {label: "<", value: "LT"},
        {label: "<=", value: "LE"},
      ],
      searchForm: {
        region: "",
        product: "",
      },

      searchRules: {
        region: [
          {
            required: true,
            message: "请选择银行",
            trigger: "change",
          },
        ],

        product: [
          {
            required: true,
            message: "请选择产品",
            trigger: "change",
          },
        ],
      },

      // 选择银行select框
      regionData: [],
      // 选择产品select框
      productData: [],
      // 银行和产品接口数据
      selectData: [],

      // 某个产品下去重后的条件的数据（用于遍历表单）
      // data: [],

      // 某个产品下所有的条件的数据
      result: [],

      formArr: [],

      rules: {},

      addRules: {
        condition: [{required: true, message: "请选择", trigger: "change"}],
        option: [{required: true, message: "请选择", trigger: "change"}],
      },
      form: {},

      addVisible: false,
      deleteVisible: false,
      dic: {},

      productId: "",

      addForm: {
        condition: null,
        option: null,
      },

      addArr: [],
      optionArr: [],
      deleteFrom: [],

      isAddMultiple: false,
      AddUpdate: true,

      conditionLoading: false,
      isShowFrom: false,

      checkAll: false,
      isIndeterminate: false,
    };
  },

  watch: {
    isAddMultiple() {
      //单个监控
      this.AddUpdate = false;
      // this.$nextTick(function () {
      //   this.AddUpdate = true;
      // });
      setTimeout(() => {
        this.AddUpdate = true;
      }, 50);
    },
  },

  async created() {
    // 产品匹配条件各维度元数据查询
    const dicres = await getProductDimension();

    dicres.data.forEach((item) => {
      this.dic[item.conditions] = item;
    });

    this.getListBankProduct();
  },

  methods: {
    myinput(index) {
      this.$refs.form.validateField("myinput" + index);
    },
    // 添加单个连三累六添加
    addSCOPE(item, val, j, index) {
      var obj = {
        value1: "",
        value2: "",
        dimensionId: j.dimensionId,
        unknowns: j.unknowns,
        conditions: val,
        label: j.label,
      };
      return item.splice(index + 1, 0, obj);
    },
    // 删除单个连三累六添加
    scurvy(index, item) {
      if(this.form['l3l6'].length==1){
        let index = this.formArr.indexOf("l3l6");
        if (index !== -1) {
          this.formArr.splice(index, 1);
        }
      }
      return item.splice(index, 1);
    },
    changeLeftOp(e, idx, i) {
      if (e === "NO") {
        return (e.leftValue = null);
      }
    },
    changeRightOp(e, idx, i) {
      if (e === "NO") {
        return (e.rightValue = null);
      }
    },
    regionChange() {
      this.productData = this.selectData.find(
        (item) => item.bankId == this.searchForm.region
      ).productList;
    },

    // 条件匹配查询银行和产品列表
    async getListBankProduct(text) {
      const res = await getListBankProduct();
      this.selectData = res.data;

      this.regionData = this.selectData.map((item) => {
        return {
          value: item.bankId,
          label: item.bankName,
        };
      });

      if (this.$route.query.productId) {
        this.searchForm.region = this.$route.query.bankId;
        this.regionChange();
        this.searchForm.product = this.productData.find(
          (val) => val.id == this.$route.query.productId
        );
        this.getProductDetails();
      }

      if (text === "submit") {
        this.regionChange();
        this.searchForm.product = this.productData.find(
          (val) => val.id == this.productId
        );
        this.getProductDetails();
      }
    },

    // 查询某个产品各维度的数据
    getProductDetails() {
      this.$refs["selectForm"].validate((valid) => {
        if (valid) {
          this.isShowFrom = false;

          this.productId = this.searchForm.product.id;
          this.conditionLoading = true;

          getProductDetails({
            productId: this.productId,
          })
            .then((res) => {
              this.result = res.data;
              this.formArr = this.result.map((it) => {
                return it.conditions;
              });

              this.dataHandel();
            })
            .finally(() => {
              this.conditionLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    onSubmit() {
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          let submitArr = [];
          Object.keys(this.form).forEach((key) => {
            if (this.dic[key].valueType === "BETWEEN") {
              submitArr.push({
                productId: this.productId,
                dimensionId: this.dic[key].selectList[0].id,
                conditions: this.dic[key].conditions,
                value: "",
                weight: this.dic[key].selectList[0].weight,
                valueMin: this.form[key].valueMin,
                valueMax: this.form[key].valueMax,
                validConditions: this.dic[key].selectList[0].validConditions,
                params: "",
              });
            } else if (this.dic[key].valueType === "EQUAL") {
              submitArr.push({
                productId: this.productId,
                dimensionId: this.dic[key].selectList[0].id,
                conditions: this.dic[key].conditions,
                value: this.form[key],
                weight: this.dic[key].selectList[0].weight,
                valueMin: null,
                valueMax: null,
                validConditions: this.dic[key].selectList[0].validConditions,
                params: "",
              });
            } else if (this.dic[key].valueType === "OP_EQUAL") {
              var list = [];

              this.form[key].map((v, index) => {
                console.log(v);

                list = [];

                if (v.value2) {
                  list.push(
                    {
                      un: v.unknowns[0],
                      type: "OP_EQUAL",
                      value: v.value1,
                    },
                    {
                      un: v.unknowns[1],
                      type: "OP_EQUAL",
                      value: v.value2,
                    }
                  );
                  submitArr.push({
                    productId: this.productId,
                    dimensionId: v.dimensionId,
                    conditions: this.dic[key].conditions,
                    value: JSON.stringify(list),
                    weight: this.dic[key].selectList[0].weight,
                    valueMin: null,
                    valueMax: null,
                    validConditions:
                    this.dic[key].selectList[0].validConditions,
                    params: "",
                  });
                } else {
                  list.push({
                    un: v.unknowns[0],
                    type: "OP_EQUAL",
                    value: v.value1,
                  });

                  submitArr.push({
                    productId: this.productId,
                    dimensionId: v.dimensionId,
                    conditions: this.dic[key].conditions,
                    value: JSON.stringify(list),
                    weight: this.dic[key].selectList[0].weight,
                    valueMin: null,
                    valueMax: null,
                    validConditions:
                    this.dic[key].selectList[0].validConditions,
                    params: "",
                  });
                }
              });
            } else if (this.dic[key].valueType === "OP_SCOPE") {
              submitArr.push({
                productId: this.productId,
                dimensionId: this.dic[key].selectList[0].id,
                conditions: this.dic[key].conditions,
                value: JSON.stringify(this.form[key]),
                weight: this.dic[key].selectList[0].weight,
                valueMin: null,
                valueMax: null,
                validConditions: this.dic[key].selectList[0].validConditions,
                params: "",
              });
            } else {
              this.dic[key].selectList.forEach((it) => {
                if (this.dic[key].valueType === "ENUM_MORE") {
                  this.form[key].forEach((val) => {
                    if (val === it.id) {
                      submitArr.push({
                        productId: this.productId,
                        dimensionId: it.id,
                        conditions: it.conditions,
                        value: it.value,
                        weight: it.weight,
                        valueMin: null,
                        valueMax: null,
                        validConditions: it.validConditions,
                        params: "",
                      });
                    }
                  });
                } else if (this.dic[key].valueType === "ENUM") {
                  if (this.form[key] === it.id) {
                    submitArr.push({
                      productId: this.productId,
                      dimensionId: it.id,
                      conditions: it.conditions,
                      value: it.value,
                      weight: it.weight,
                      valueMin: null,
                      valueMax: null,
                      validConditions: it.validConditions,
                      params: "",
                    });
                  }
                }
              });
            }
          });

          addOrUpdateMatching({
            conditionsList: submitArr,
            productId: this.productId,
          }).then((res) => {
            this.$message.success("提交成功");
            // if (this.searchForm.product.entered === 1) {
            //   this.getProductDetails();
            // } else if (
            //   this.searchForm.product.entered === 0 ||
            //   submitArr.length === 0
            // ) {
            //   this.getListBankProduct("submit");
            // }
            this.getListBankProduct("submit");
            this.$router.back()
            // this.getProductDetails();
          });
        } else {
          return false;
          4;
        }
      });
    },

    addCondition() {
      this.addVisible = true;
      this.addArr = [];

      Object.keys(this.dic).forEach((key) => {
        if (this.formArr.findIndex((val) => key === val) === -1) {
          this.addArr.push(this.dic[key]);
        }
      });
    },

    addChange(e) {
      this.addFormList = [];
      // 新加添加表单数据

      if (
        this.dic[this.addForm.condition].valueType === "ENUM_MORE" ||
        this.dic[this.addForm.condition].valueType === "OP_EQUAL"
      ) {
        this.isAddMultiple = true;
      } else {
        this.isAddMultiple = false;
      }

      this.addForm.option = null;
      this.optionArr = this.dic[e].selectList;
    },
    addChangeLIST() {
      this.addFormList.push(this.addForm.option);
      if (this.addForm.option) {
        this.addFormList = [];
        this.addForm.option.map((val) => {
          this.addFormList.push(val);
        });
      }
    },

    deleteCondition() {
      this.deleteVisible = true;
    },

    delConfirm() {
      if (this.deleteFrom.length === 0) {
        return this.$message.error("请选择需要删除的条件");
      }

      if (!this.checkAll) {
        this.deleteFrom.forEach((it) => {
          for (let i = 0; i < this.formArr.length; i++) {
            if (this.formArr[i] === it) {
              this.formArr.splice(i, 1);
              i--;
            }
          }
          this.$delete(this.form, it);
          this.$delete(this.rules, it);
        });
      } else {
        this.emptyObject(this.rules);
        this.formArr.length = 0;
        this.emptyObject(this.form);
      }

      this.deleteVisible = false;
      this.deleteFrom = [];

      this.checkAll = false;
      this.isIndeterminate = false;
    },

    emptyObject(obj) {
      for (var key in obj) {
        delete obj[key];
      }
    },

    fromHandel() {

      let validateMaxBetween = (rule, value, callback) => {
        if (value < this.form.age.valueMin) {
          callback(new Error("年龄结束值不能大于起始值"));
        } else if (value === this.form.age.valueMin) {
          callback(new Error("年龄结束值不能等于起始值"));
        } else {
          callback();
        }
      };
      if (this.dic[this.addForm.condition].valueType === "BETWEEN") {
        this.$set(this.form, this.addForm.condition, {
          valueMax: this.addForm.option.valueMax,
          valueMin: this.addForm.option.valueMin,
        });
        this.rules[`${this.addForm.condition}.valueMin`] = [
          {required: true, message: "请输入", trigger: "blur"},
        ];
        this.rules[`${this.addForm.condition}.valueMax`] = [
          {required: true, message: "请输入", trigger: "blur"},
        ];

        if (this.addForm.condition === "age") {
          this.rules[`${this.addForm.condition}.valueMin`].push({
            pattern: /^(1[89]|[2-8][0-9]|100)$/, //正则校验不用字符串
            message: "请输入18~100之间的正整数",
            trigger: "blur",
          });
          this.rules[`${this.addForm.condition}.valueMax`].push(
            {
              pattern: /^(1[89]|[2-8][0-9]|100)$/, //正则校验不用字符串
              message: "请输入18~100之间的正整数",
              trigger: "blur",
            },
            {validator: validateMaxBetween, trigger: "blur"}
          );
        }
      } else if (this.dic[this.addForm.condition].valueType === "ENUM_MORE") {
        let formAddData = this.addForm.option.map((val) => {
          return val.id;
        });
        this.$set(this.form, this.addForm.condition, formAddData);
        this.rules[this.addForm.condition] = [
          {required: true, message: "请选择", trigger: "change"},
        ];
      } else if (this.dic[this.addForm.condition].valueType === "ENUM") {
        this.$set(this.form, this.addForm.condition, this.addForm.option.id);
        this.rules[this.addForm.condition] = [
          {required: true, message: "请选择", trigger: "change"},
        ];
      } else if (this.dic[this.addForm.condition].valueType === "EQUAL") {
        this.$set(this.form, this.addForm.condition, this.addForm.option.value);
        this.rules[this.addForm.condition] = [
          {required: true, message: "请输入", trigger: "blur"},
        ];

        // if (this.addForm.condition === "netCount") {
        //   this.rules[`${this.addForm.condition}`].push({
        //     pattern: /^[0-9][0-9]{0,3}$/, //正则校验不用字符串
        //     message: "请输入0~9999之间的正整数",
        //     trigger: "blur",
        //   });
        // }
      } else if (this.dic[this.addForm.condition].valueType === "OP_EQUAL") {
        var arr = [];
        this.addFormList.map((val, i) => {
          if (val.unknowns.split(",").length > 1) {
            val.unknowns.split(",");
            arr.push({
              value1: "",
              value2: "",
              id: this.dic[this.addForm.condition].conditions,
              unknowns: val.unknowns.split(","),
              dimensionId: val.id,
              conditions: val.conditions,
            });
          } else {
            val.unknowns.split(",");
            arr.push({
              value1: "",
              id: this.dic[this.addForm.condition].conditions,
              unknowns: val.unknowns.split(","),
              dimensionId: val.id,
              conditions: val.conditions,
            });
          }
          this.$set(
            this.form,
            this.dic[this.addForm.condition].conditions,
            arr
          );
        });
        this.rules[this.addForm.condition] = [
          {required: true, message: "请输入", trigger: "blur"},
        ];
      } else if (this.dic[this.addForm.condition].valueType === "OP_SCOPE") {
        var arr = [];
        if(this.addForm.condition=='age'){
          this.dic[this.addForm.condition].selectList.map((item, index) => {
          arr.push({
            leftOp: "LE",
            leftValue: "16",
            un: this.dic[this.addForm.condition].selectList[index].unknowns,
            rightOp: "LE",
            rightValue: "26",
            label: item.label,
            conditions: item.conditions,
          });
        });
        }else{
          this.dic[this.addForm.condition].selectList.map((item, index) => {
          arr.push({
            leftOp: "",
            leftValue: "",
            un: this.dic[this.addForm.condition].selectList[index].unknowns,
            rightOp: "",
            rightValue: "",
            label: item.label,
            conditions: item.conditions,
          });
        });
        }



        this.$set(this.form, this.dic[this.addForm.condition].conditions, arr);

        this.rules[this.addForm.condition] = [
          {required: true, message: "请输入", trigger: "blur"},
        ];
      }
    },

    addHandel() {
      if (!this.formArr.some((val) => val === this.addForm.condition)) {
        this.$refs["addformRef"].validate((valid) => {
          if (valid) {
            this.formArr.push(this.addForm.condition);

            this.fromHandel();
            this.addVisible = false;
            this.resetFrom("addformRef");
          } else {
            return false;
          }
        });
      } else {
        this.$message.error("该产品已经有这个条件");
      }
    },

    addDialogClose() {
      this.resetFrom("addformRef");
    },

    delDialogClose() {
      this.checkAll = false;
      this.isIndeterminate = false;
      this.deleteFrom = [];
    },

    dataHandel() {
      this.form = {};
      this.rules = {};
      let validateMaxBetween = (rule, value, callback) => {
        if (value < this.form.age.valueMin) {
          callback(new Error("年龄结束值不能大于起始值"));
        } else if (value === this.form.age.valueMin) {
          callback(new Error("年龄结束值不能等于起始值"));
        } else {
          callback();
        }
      };

      this.result.forEach((it) => {
        if (this.dic[it.conditions].valueType === "BETWEEN") {
          if (it.selectList.length === 0) {
            this.$set(this.form, it.conditions, {valueMax: "", valueMin: ""});
          } else {
            this.$set(this.form, it.conditions, {
              valueMax: it.selectList[0].valueMax,
              valueMin: it.selectList[0].valueMin,
            });
          }

          this.rules[`${it.conditions}.valueMin`] = [
            {required: true, message: "请输入", trigger: "blur"},
          ];
          this.rules[`${it.conditions}.valueMax`] = [
            {required: true, message: "请输入", trigger: "blur"},
          ];

          if (it.conditions === "age") {
            this.rules[`${it.conditions}.valueMin`].push({
              pattern: /^(1[89]|[2-8][0-9]|100)$/, //正则校验不用字符串
              message: "请输入18~100之间的正整数",
              trigger: "blur",
            });
            this.rules[`${it.conditions}.valueMax`].push(
              {
                pattern: /^(1[89]|[2-8][0-9]|100)$/, //正则校验不用字符串
                message: "请输入18~100之间的正整数",
                trigger: "blur",
              },
              {validator: validateMaxBetween, trigger: "blur"}
            );
          }
        } else if (this.dic[it.conditions].valueType === "ENUM_MORE") {
          if (it.selectList.length === 0) {
            this.$set(this.form, it.conditions, []);
          } else {
            let arr = it.selectList.map((val) => {
              return val.dimensionId;
            });
            this.$set(this.form, it.conditions, arr);
          }

          this.rules[it.conditions] = [
            {required: true, message: "请选择", trigger: "change"},
          ];
        } else if (this.dic[it.conditions].valueType === "ENUM") {
          if (it.selectList.length === 0) {
            this.$set(this.form, it.conditions, "");
          } else {
            this.$set(this.form, it.conditions, it.selectList[0].dimensionId);
          }

          this.rules[it.conditions] = [
            {required: true, message: "请选择", trigger: "change"},
          ];
        } else if (this.dic[it.conditions].valueType === "EQUAL") {
          if (it.selectList.length === 0) {
            this.$set(this.form, it.conditions, "");
          } else {
            this.$set(this.form, it.conditions, it.selectList[0].value);
          }

          this.rules[it.conditions] = [
            {required: true, message: "请输入", trigger: "blur"},
          ];
        } else if (this.dic[it.conditions].valueType === "OP_EQUAL") {
          if (it.selectList.length === 0) {
            this.$set(this.form, it.conditions, "");
          } else {
            var arr = [];

            it.selectList.map((item, index) => {
              if (JSON.parse(item.value).length > 1) {
                arr.push({
                  value1: JSON.parse(item.value)[0].value,
                  value2: JSON.parse(item.value)[1].value,
                  id: item.id,
                  unknowns: [
                    JSON.parse(item.value)[0].un,
                    JSON.parse(item.value)[1].un,
                  ],
                  dimensionId: item.dimensionId,
                  conditions: item.conditions,
                });
              } else {
                arr.push({
                  value1: JSON.parse(item.value)[0].value,
                  id: item.id,
                  unknowns: [JSON.parse(item.value)[0].un],
                  dimensionId: item.dimensionId,
                  conditions: item.conditions,
                });
              }
            });
            this.$set(this.form, it.conditions, arr);
          }

          this.rules[it.conditions] = [
            {required: true, message: "请输入", trigger: "blur"},
          ];
        } else if (this.dic[it.conditions].valueType === "OP_SCOPE") {
          var arr = [];

          it.selectList.map((item, index) => {
            arr = JSON.parse(item.value);
          });

          this.$set(this.form, it.conditions, arr);
          this.rules[it.conditions] = [
            {required: true, message: "请输入", trigger: "blur"},
          ];
        }
      });

      this.isShowFrom = true;
    },

    productChange() {
      if (this.$route.query.productId) {
        this.$router.push({query: {}}); // 删除页面参数
      }

      this.getProductDetails();
    },

    resetFrom(formName) {
      if (formName === "selectForm") {
        this.productId = "";
        this.result = [];
        this.formArr = [];
        this.rules = {};
        this.form = {};
      }
      this.$refs[formName].resetFields();
    },

    isMultiple(str) {
      if (str === "ENUM_MORE") {
        return true;
      } else if (str === "ENUM") {
        return false;
      }
    },

    handleCheckAllChange(val) {
      this.deleteFrom = val ? this.formArr : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.formArr.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.formArr.length;
    },
  },
};
</script>

<style scoped lang="scss">
// 数组
.display-OP_EQUAL {
  display: flex;
}

/deep/ .el-divider--horizontal {
  margin: 6px 0;
}

.empty-title {
  font-weight: 500;
  font-size: 18px;
  color: #222222;
}

.el-empty {
  padding: 150px 0 180px;
}

.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  padding: 20px 20px 0 20px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    height: 48px;

    .title-name {
      margin: 0 7px 0 10px;
      font-weight: bold;
    }

    .state {
      width: 76px;
      height: 26px;
      border-radius: 4px;
      text-align: center;
      line-height: 26px;
      font-size: 14px;
    }

    .not-entered {
      background-color: #e7e7e7;
      color: #999999;
    }

    .entered {
      background: #c3e0ff;
      color: #409eff;
    }
  }

  .inputSty {
    display: flex;

    .input-line {
      margin: 0 12px;
    }
  }

  .form-main-title {
    font-weight: bold;
    font-size: 18px;
    color: #222222;
    text-align: left;
  }

  .deletet {
    font-weight: bold;
    font-size: 16px;
    color: #222222;
    margin: 24px 0 16px 0;
  }

  /deep/ .el-dialog__footer {
    text-align: center;
    padding: 80px 0 46px;
  }

  /deep/ .el-dialog__header {
    text-align: center;
    font-weight: bold;
  }

  .weightinput {
    width: 160px;
    margin-left: 16px;
  }

  .bottom {
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    text-align: center;
    line-height: 80px;
  }

  .el-image {
    border-radius: 8px;
  }

  .dialog-hint {
    font-size: 16px;
    color: #cccccc;
    padding: 0 0 20px 120px;
  }
}
</style>
